<template>
		<StepPlan></StepPlan>
		<DrawerSidebar :Fshow='Fshow'>
			<view class="Sidebarcontent">
				<view class="logo " :style="{'margin-top':statusBarHeight+'px'}">
					<image class="logoImg" src="@/static/logo.png" mode="aspectFit"/>
				</view>
				<view class="toptext">
					<view class="">
						快捷列表
					</view>
					
					<view class="add">
						新建
					</view>
				</view>
				<view class="scroll"> 
					<scroll-view>
						<ListItem v-for="(item,index) in 2000" :key="index" :index="index"/>
					</scroll-view>
				</view>
				<view class="footBar">
					<view @click="handle('list')" class="sideButton">
						<view class="iconfont icon icon-x"/>
						<span >关闭</span>
					</view>
					<view @click="handle('globe')" class="sideButton">
						<view class="iconfont icon icon-globe"/>
						<span >社区</span>
					</view>
					<view @click="handle('bluetoot')" class="sideButton">
						<view class="iconfont icon icon-bluetooth"/>
						<span >设备</span>
					</view>
				</view>
				<view class="foot">
					<Version/>
				</view>
			</view>
		</DrawerSidebar>
	<BottomControls @handle='handle'/>
</template>

<script setup>
	import { ref } from 'vue';
	import ListItem from '@/components/ListItem/ListItem.vue';
	let {statusBarHeight}=uni.getWindowInfo()
	const Fshow = ref(true)
	const handle =(a)=>{
		console.log(a)
		if(a=='list'){
			Fshow.value = !Fshow.value
		}
	}
</script>

<style scoped>
	.toptext{
		font: 0.7em sans-serif;
		padding: 5px;
		display:flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
	}
	.logo{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 5vh;
	}
	.logoImg{
		width: 100%;
	}
	.Sidebarcontent{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content:space-around;
		height:calc(100% - 20px) ;
		margin-top: 20px ;
	}
	.sideButton{
		color: #000000;
		flex: 1;
		padding: 5px;
		margin: 0 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #ffffff;
		font-size:0.7em;
	}
	.icon,.add{
		padding: 5px;
		margin: 0 0 5px 0;
		border-radius: 999px;
		font: 20px sans-serif;
		background: var(--b-color);
		box-shadow: 0 5px 10px var(--b-color);
	}
	.add{
		font: 1em sans-serif;
		padding:5px 15px;
	}
	.scroll{
		height: 70%;
		width: 100%;
		overflow: auto;/* 确保内容溢出时可以滚动 */
	}
	.scroll:first-child{
		margin-top:0;
	}
	.footBar{
		width: 100%;
		display: flex;
		margin: 5PX;
	}
	.foot{
		font: 0.6em sans-serif;
	}
	/* 隐藏滚动条但保留滚动功能 */
	.scroll::-webkit-scrollbar {
	            display: none; /* Chrome, Safari, Opera */
	        }
	        .scroll {
	            -ms-overflow-style: none;  /* IE and Edge */
	            scrollbar-width: none;  /* Firefox */
	        }
</style>
